<template>
  <div class="icon-selector">
    <el-input v-model="selectedIcon" placeholder="请选择图标" clearable @clear="handleClear" @click.native="togglePopover">
      <template #prefix>
        <i v-if="selectedIcon" :class="selectedIcon"></i>
      </template>
    </el-input>

    <el-popover v-model="popoverVisible" placement="bottom" trigger="manual" width="600" append-to-body>
      <div class="selector-container">
        <!-- 左侧分类 -->
        <div class="category">
          <el-menu default-active="ele" class="el-menu-vertical-demo">
            <el-menu-item index="ele" @click="activeTab = 'ele'">
              <span>Element UI图标</span>
            </el-menu-item>
            <el-menu-item index="ali" @click="activeTab = 'ali'">
              <span>阿里图标</span>
            </el-menu-item>
            <el-menu-item index="awesome" @click="activeTab = 'awesome'">
              <span>Awesome图标</span>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- 右侧图标列表 -->
        <div class="icon-list">
          <div class="search-box">
            <el-input v-model="searchKey" placeholder="搜索图标" clearable />
          </div>

          <div class="list">
            <el-row :gutter="10">
              <el-col v-for="icon in filteredIcons" :key="icon" :xs="6" :sm="4" :md="3" :lg="2">
                <div class="icon-item" :class="{ active: selectedIcon === icon }" @click="selectIcon(icon)">
                  <i :class="icon"></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { getAliFontIcon, getAwesomeIconfont, getElementUiIcon } from '@/utils/iconLoader'

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      popoverVisible: false,
      activeTab: 'ele',
      searchKey: '',
      aliIcons: [],
      eleIcons: [],
      awesomeIcons: [],
      selectedIcon: this.value
    }
  },
  computed: {
    filteredIcons() {
      let icons = []

      switch (this.activeTab) {
        case 'ali':
          icons = this.aliIcons
          break
        case 'ele':
          icons = this.eleIcons
          break
        case 'awesome':
          icons = this.awesomeIcons
          break
      }

      if (!this.searchKey) {
        return icons
      }

      return icons.filter((icon) => icon.includes(this.searchKey.toLowerCase()))
    }
  },
  watch: {
    selectedIcon(newVal) {
      this.$emit('input', newVal)
    },
    value(newVal) {
      this.selectedIcon = newVal
    }
  },
  mounted() {
    this.loadIcons()
  },
  methods: {
    async loadIcons() {
      this.eleIcons = await getElementUiIcon()
      this.awesomeIcons = await getAwesomeIconfont()
      this.aliIcons = await getAliFontIcon()
    },
    togglePopover() {
      this.popoverVisible = !this.popoverVisible
    },
    handleClear() {
      this.popoverVisible = false
      this.selectedIcon = ''
      this.searchKey = ''
    },
    selectIcon(icon) {
      this.popoverVisible = false
      this.selectedIcon = icon
      this.searchKey = ''
    }
  }
}
</script>

<style scoped>
.icon-selector {
  position: relative;
  width: 100%;
}

.category {
  float: left;
  width: 150px;
  height: 300px;
}

.icon-list {
  margin-left: 160px;
}

.search-box {
  margin-bottom: 15px;
}

.list {
  max-height: 250px;
  overflow-y: auto;
}

.icon-item {
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.icon-item:hover {
  background-color: #f5f7fa;
}

.icon-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.icon-item i {
  font-size: 20px;
}
</style>
